<template>
  <div class="play-page-header">
    <span
      @click="$emit('hide-play-page')"
      class="iconfont icon-xiajiantou"
    ></span>
    <div class="song-name">
      <h3>{{ currentSong.name }}</h3>
      <h5
        v-for="artist in currentSong.song
          ? currentSong.song.artists
          : currentSong.ar"
        :key="artist.id"
      >
        {{ artist.name }}
      </h5>
    </div>
    <div class="share iconfont icon-fenxiang"></div>
  </div>
</template>

<script>
export default {
  props: {
    currentSong: [Object, null],
  },
};
</script>

<style lang="less">
.play-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    color: #fff;
    font-size: 26px;
    font-weight: 600;
  }
  .song-name {
    text-align: center;
    h3 {
      color: #fff;
    }
    h5 {
      color: rgba(255, 251, 240, 0.5);
      font-size: 14px;
    }
  }
  .share {
    color: #fff;
    font-size: 26px;
  }
}
</style>